<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Speakr</title>
    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
    <meta name="theme-color" content="#007bff">
    <link rel="icon" href="{{ url_for('static', filename='img/favicon.svg') }}" type="image/svg+xml">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</head>
<body class="bg-[var(--bg-primary)] text-[var(--text-primary)]">
    <div 
        id="app" 
        class="container mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col" 
        :class="{ 'use-asr-endpoint': useAsrEndpoint }"
        data-use-asr-endpoint="{{ use_asr_endpoint }}"
        data-current-user-name="{{ current_user.name or '' }}">
        <header class="flex justify-between items-center mb-6 pb-4 border-b border-[var(--border-primary)]">
             <h1 class="text-3xl font-bold text-[var(--text-primary)] cursor-pointer flex items-center" @click="switchToGalleryView" title="Go to Gallery">
                <img src="{{ url_for('static', filename='img/favicon.svg') }}" alt="Speakr Logo" class="h-9 w-9 mr-2">
                Speakr
            </h1>
            <div class="flex items-center space-x-2 lg:space-x-2">
                <!-- Hamburger Menu for Mobile -->
                <button @click="toggleMobileMenu" class="lg:hidden p-2 rounded-full text-[var(--text-muted)] hover:bg-[var(--bg-tertiary)] dark:text-gray-400 dark:hover:bg-gray-700 transition-colors duration-200" title="Open Menu">
                    <i class="fas fa-bars"></i>
                </button>
                <!-- Dark Mode Toggle - visible on all sizes -->
                 <button @click="toggleDarkMode" class="p-2 rounded-full text-[var(--text-muted)] hover:bg-[var(--bg-tertiary)] dark:text-gray-400 dark:hover:bg-gray-700 transition-colors duration-200" :title="isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'">
                    <i :class="isDarkMode ? 'fas fa-sun' : 'fas fa-moon'"></i>
                </button>
                {% if current_user.is_authenticated %}
                <!-- Add New Recording Button for Mobile Header -->
                <button @click="switchToUploadView" class="lg:hidden p-2 rounded-full text-[var(--text-muted)] hover:bg-[var(--bg-tertiary)] dark:text-gray-400 dark:hover:bg-gray-700 transition-colors duration-200" title="New Recording">
                    <i class="fas fa-plus"></i>
                </button>
                <!-- Mobile User Menu Button -->
                <div class="relative lg:hidden">
                    <button @click="isMobileUserMenuOpen = !isMobileUserMenuOpen" class="p-2 rounded-full text-[var(--text-muted)] hover:bg-[var(--bg-tertiary)] dark:text-gray-400 dark:hover:bg-gray-700 transition-colors duration-200" title="User Menu">
                        <i class="fas fa-user"></i>
                    </button>
                    <div v-if="isMobileUserMenuOpen" class="absolute right-0 mt-2 w-48 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg shadow-lg z-50">
                        <a href="{{ url_for('account') }}" @click="isMobileUserMenuOpen = false" class="block px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-accent)]">
                            <i class="fas fa-user-circle mr-2"></i> Account
                        </a>
                        <button @click="openColorSchemeModal(); isMobileUserMenuOpen = false;" class="w-full text-left px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-accent)]">
                            <i class="fas fa-palette mr-2"></i> Color Schemes
                        </button>
                        {% if current_user.is_admin %}
                        <a href="{{ url_for('admin') }}" @click="isMobileUserMenuOpen = false" class="block px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-accent)]">
                            <i class="fas fa-user-shield mr-2"></i> Admin
                        </a>
                        {% endif %}
                        <a href="{{ url_for('logout') }}" @click="isMobileUserMenuOpen = false" class="block px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-danger)]">
                            <i class="fas fa-sign-out-alt mr-2"></i> Logout
                        </a>
                    </div>
                </div>
                {% endif %}
                <!-- Desktop Menu Items - hidden on small screens, shown on lg and up -->
                <div class="hidden lg:flex items-center space-x-2">
                {% if current_user.is_authenticated %}
                <button @click="switchToUploadView" class="px-4 py-2 mr-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg shadow hover:bg-[var(--bg-button-hover)] focus:outline-none focus:ring-2 focus:ring-[var(--border-focus)] focus:ring-offset-2 transition duration-150 ease-in-out">
                    <i class="fas fa-plus mr-1"></i> New Recording
                </button>
                <button
                    @click="switchToGalleryView"
                    :class="{
                        'bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-secondary)]': currentView !== 'gallery',
                        'bg-[var(--bg-accent)] text-[var(--text-accent)] border border-[var(--border-accent)]': currentView === 'gallery'
                    }"
                    class="px-4 py-2 rounded-lg shadow-sm hover:bg-[var(--bg-tertiary)] focus:outline-none focus:ring-2 focus:ring-[var(--border-focus)] focus:ring-offset-1 transition duration-150 ease-in-out">
                    <i class="fas fa-images mr-1"></i> Gallery
                </button>
                <!-- User dropdown menu -->
                <div class="relative ml-2">
                    <button @click="isUserMenuOpen = !isUserMenuOpen" class="flex items-center px-3 py-2 border border-[var(--border-secondary)] rounded-lg text-[var(--text-secondary)] hover:text-[var(--text-accent)] focus:outline-none">
                        <i class="fas fa-user mr-2"></i>
                        <span>{{ current_user.username }}</span>
                        <i class="fas fa-chevron-down ml-2"></i>
                    </button>
                    <div v-if="isUserMenuOpen" class="absolute right-0 mt-2 w-48 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg shadow-lg z-10">
                        <a href="{{ url_for('account') }}" class="block px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-accent)]">
                            <i class="fas fa-user-circle mr-2"></i> Account
                        </a>
                        <button @click="openColorSchemeModal(); isUserMenuOpen = false;" class="w-full text-left px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-accent)]">
                            <i class="fas fa-palette mr-2"></i> Color Schemes
                        </button>
                        {% if current_user.is_admin %}
                        <a href="{{ url_for('admin') }}" class="block px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-accent)]">
                            <i class="fas fa-user-shield mr-2"></i> Admin
                        </a>
                        {% endif %}
                        <a href="{{ url_for('logout') }}" class="block px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-danger)]">
                            <i class="fas fa-sign-out-alt mr-2"></i> Logout
                        </a>
                    </div>
                </div>
                {% else %}
                <a href="{{ url_for('login') }}" class="px-4 py-2 ml-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg shadow hover:bg-[var(--bg-button-hover)] focus:outline-none focus:ring-2 focus:ring-[var(--border-focus)] focus:ring-offset-2 transition duration-150 ease-in-out">
                    <i class="fas fa-sign-in-alt mr-1"></i> Login
                </a>
                <a href="{{ url_for('register') }}" class="px-4 py-2 ml-2 text-[var(--text-secondary)] hover:text-[var(--text-accent)] border border-[var(--border-secondary)] rounded-lg">
                    <i class="fas fa-user-plus mr-1"></i> Register
                </a>
                {% endif %}
                </div>
            </div>
        </header>

        <!-- Reprocess Confirmation Modal -->
        <div v-if="showReprocessModal" @click="cancelReprocess" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm transition-all duration-300 ease-in-out">
            <div @click.stop class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-300 ease-in-out">
                <!-- Header with gradient background -->
                <div class="bg-gradient-to-r from-[var(--bg-accent)] to-[var(--bg-secondary)] p-5 rounded-t-xl flex items-center">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center mr-4 shadow-lg">
                            <i class="fas fa-sync-alt text-white text-lg"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-[var(--text-primary)] mb-1">Confirm Reprocessing</h3>
                            <p class="text-sm text-[var(--text-muted)] capitalize">${ reprocessType } reprocessing</p>
                        </div>
                    </div>
                </div>
                
                <!-- Content -->
                <div class="p-6 modal-content">
                    <div v-if="reprocessRecording" class="mb-6">
                        <div class="bg-[var(--bg-tertiary)] rounded-lg p-4 border border-[var(--border-primary)]">
                            <div class="flex items-start space-x-3">
                                <i class="fas fa-file-audio text-[var(--text-accent)] mt-1"></i>
                                <div class="flex-1 min-w-0">
                                    <h4 class="font-medium text-[var(--text-primary)] truncate" :title="reprocessRecording.title">
                                        ${ reprocessRecording.title || 'Untitled Recording' }
                                    </h4>
                                    <p class="text-sm text-[var(--text-muted)] mt-1">
                                        Created: ${ new Date(reprocessRecording.created_at).toLocaleDateString() }
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="flex items-start space-x-3">
                            <div class="w-6 h-6 bg-amber-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fas fa-exclamation-triangle text-amber-600 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-[var(--text-secondary)] font-medium mb-1">What will happen?</p>
                                <p class="text-sm text-[var(--text-muted)]" v-if="reprocessType === 'transcription' && !useAsrEndpoint">
                                    The audio will be re-transcribed from scratch. This will also regenerate the title and summary based on the new transcription.
                                </p>
                                <p class="text-sm text-[var(--text-muted)]" v-else-if="reprocessType === 'transcription' && useAsrEndpoint">
                                    The audio will be re-transcribed using the ASR endpoint. This includes diarization and will regenerate the title and summary.
                                </p>
                                <p class="text-sm text-[var(--text-muted)]" v-else-if="reprocessType === 'summary'">
                                    A new title and summary will be generated based on the existing transcription.
                                </p>
                            </div>
                        </div>
                        
                        <!-- ASR Options -->
                        <div v-if="reprocessType === 'transcription' && useAsrEndpoint" class="space-y-4 pt-4 border-t border-[var(--border-primary)]">
                            <h4 class="text-md font-semibold text-[var(--text-secondary)]">ASR Options</h4>
                            <div>
                                <label for="asr-language-reprocess" class="block text-sm font-medium text-[var(--text-muted)]">Language</label>
                                <input type="text" id="asr-language-reprocess" v-model="asrReprocessOptions.language" class="mt-1 block w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)]" placeholder="e.g., en, es, zh (optional)">
                            </div>
                            <div>
                                <label for="asr-min-speakers-reprocess" class="block text-sm font-medium text-[var(--text-muted)]">Min Speakers</label>
                                <input type="number" id="asr-min-speakers-reprocess" v-model.number="asrReprocessOptions.min_speakers" class="mt-1 block w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)]" placeholder="Optional">
                            </div>
                            <div>
                                <label for="asr-max-speakers-reprocess" class="block text-sm font-medium text-[var(--text-muted)]">Max Speakers</label>
                                <input type="number" id="asr-max-speakers-reprocess" v-model.number="asrReprocessOptions.max_speakers" class="mt-1 block w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)]" placeholder="Optional">
                            </div>
                        </div>
                        
                        <div class="flex items-start space-x-3">
                            <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fas fa-clock text-blue-600 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-[var(--text-secondary)] font-medium mb-1">Processing time</p>
                                <p class="text-sm text-[var(--text-muted)]">
                                    This may take a few minutes to complete. You can continue using the app while processing.
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex items-start space-x-3" v-if="reprocessType === 'transcription'">
                            <div class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fas fa-info-circle text-red-600 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-[var(--text-secondary)] font-medium mb-1">Important note</p>
                                <p class="text-sm text-[var(--text-muted)]">
                                    Any manual edits to the transcription, title, or summary will be overwritten.
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex items-start space-x-3" v-else-if="reprocessType === 'summary'">
                            <div class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fas fa-info-circle text-red-600 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-[var(--text-secondary)] font-medium mb-1">Important note</p>
                                <p class="text-sm text-[var(--text-muted)]">
                                    Any manual edits to the title or summary will be overwritten.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Footer with action buttons -->
                <div class="bg-[var(--bg-tertiary)] px-6 py-4 rounded-b-xl flex justify-end space-x-3 border-t border-[var(--border-primary)]">
                    <button 
                        @click="cancelReprocess" 
                        class="px-5 py-2.5 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-tertiary)] transition-all duration-200 flex items-center shadow-sm font-medium">
                        <i class="fas fa-times mr-2"></i>
                        Cancel
                    </button>
                    <button 
                        @click="executeReprocess" 
                        class="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center shadow-lg font-medium transform hover:scale-105">
                        <i class="fas fa-sync-alt mr-2"></i>
                        Start Reprocessing
                    </button>
                </div>
            </div>
        </div>
        <!-- Reset Status Confirmation Modal -->
        <div v-if="showResetModal" @click="cancelReset" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div @click.stop class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-md">
                <div class="p-6 text-center">
                    <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-orange-100 dark:bg-orange-800 mb-4">
                        <i class="fas fa-exclamation-triangle text-2xl text-orange-500 dark:text-orange-300"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-[var(--text-primary)] mb-2">Reset Recording Status?</h3>
                    <p class="text-sm text-[var(--text-muted)] mb-6">
                        This will mark the recording as 'Failed'. This is useful if processing is stuck. You will be able to reprocess it afterwards.
                    </p>
                </div>
                <div class="bg-[var(--bg-tertiary)] px-6 py-4 rounded-b-xl flex justify-end space-x-3">
                    <button @click="cancelReset" class="px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-tertiary)]">
                        Cancel
                    </button>
                    <button @click="executeReset" class="px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600">
                        Yes, Reset Status
                    </button>
                </div>
            </div>
        </div>
        <!-- Speaker Identification Modal -->
        <div v-if="showSpeakerModal" @click="closeSpeakerModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div @click.stop class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-4xl flex flex-col max-h-[90vh]">
                <div class="p-5 border-b border-[var(--border-primary)] flex-shrink-0">
                    <h3 class="text-xl font-bold text-[var(--text-primary)]">Identify Speakers</h3>
                    <!-- Warning for too many speakers -->
                    <div v-if="identifiedSpeakers.length > 8" class="mt-3 p-3 bg-[var(--bg-warn-light)] border border-amber-300 dark:border-amber-800 rounded-lg">
                        <div class="flex items-start">
                            <i class="fas fa-exclamation-triangle text-[var(--text-warn-strong)] mt-0.5 mr-2"></i>
                            <div class="text-sm">
                                <p class="font-medium text-[var(--text-warn-strong)]">More speakers than available colors</p>
                                <p class="text-[var(--text-warn-strong)] mt-1">
                                    You have ${ identifiedSpeakers.length } speakers, but only 8 unique colors are available. 
                                    Colors will repeat after the 8th speaker.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex-grow flex overflow-hidden modal-content">
                    <div class="w-1/3 p-6 space-y-4 overflow-y-auto custom-scrollbar border-r border-[var(--border-primary)]">
                        <div v-for="(speaker, index) in identifiedSpeakers" :key="speaker" class="space-y-3">
                            <!-- Speaker label with color indicator and "This is Me" checkbox on same line -->
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-2">
                                    <div :class="speakerMap[speaker].color" class="w-4 h-4 rounded-full border border-white/30 shadow-sm flex-shrink-0"></div>
                                    <span class="font-mono text-sm text-[var(--text-muted)]">${ speaker }</span>
                                    <span v-if="index >= 8" class="text-xs text-[var(--text-warn-strong)] bg-[var(--bg-warn-light)] px-2 py-0.5 rounded-full" title="Color repeats from speaker ${ ((index % 8) + 1) }">
                                        Repeat
                                    </span>
                                </div>
                                <label class="flex items-center text-sm text-[var(--text-muted)]">
                                    <input type="checkbox" v-model="speakerMap[speaker].isMe" @focus="highlightSpeakerInTranscript(speaker)" @blur="clearSpeakerHighlight" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="ml-2">Me</span>
                                </label>
                            </div>
                            
                            <!-- Autocomplete input field - disabled when "This is Me" is checked -->
                            <div class="relative">
                                <input 
                                    type="text" 
                                    v-model="speakerMap[speaker].name" 
                                    @input="searchSpeakers($event.target.value, speaker)"
                                    @focus="highlightSpeakerInTranscript(speaker)" 
                                    @blur="clearSpeakerHighlight(); setTimeout(() => speakerSuggestions[speaker] = [], 200)"
                                    :disabled="speakerMap[speaker].isMe"
                                    class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)] disabled:bg-[var(--bg-tertiary)] disabled:text-[var(--text-muted)] disabled:cursor-not-allowed" 
                                    :placeholder="speakerMap[speaker].isMe ? 'Me' : 'Enter name for ' + speaker"
                                    autocomplete="off">
                                
                                <!-- Loading indicator -->
                                <div v-if="loadingSuggestions[speaker] && !speakerMap[speaker].isMe" class="absolute right-3 top-1/2 transform -translate-y-1/2">
                                    <i class="fas fa-spinner fa-spin text-[var(--text-muted)] text-sm"></i>
                                </div>
                                
                                <!-- Suggestions dropdown -->
                                <div v-if="speakerSuggestions[speaker] && speakerSuggestions[speaker].length > 0 && !speakerMap[speaker].isMe" 
                                     class="absolute z-10 w-full mt-1 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-md shadow-lg max-h-48 overflow-y-auto">
                                    <div class="py-1">
                                        <div v-for="suggestion in speakerSuggestions[speaker]" 
                                             :key="suggestion.id"
                                             @mousedown="selectSpeakerSuggestion(speaker, suggestion)"
                                             class="px-3 py-2 cursor-pointer hover:bg-[var(--bg-tertiary)] flex items-center justify-between">
                                            <div class="flex-grow">
                                                <div class="text-sm font-medium text-[var(--text-primary)]">${ suggestion.name }</div>
                                                <div class="text-xs text-[var(--text-muted)]">
                                                    Used ${ suggestion.use_count } time${ suggestion.use_count !== 1 ? 's' : '' }
                                                    <span v-if="suggestion.last_used">
                                                        • Last: ${ new Date(suggestion.last_used).toLocaleDateString() }
                                                    </span>
                                                </div>
                                            </div>
                                            <i class="fas fa-user text-[var(--text-muted)] ml-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="w-2/3 p-6 flex flex-col overflow-hidden">
                        <!-- Audio Player Section -->
                        <div class="mb-4 flex-shrink-0">
                            <h4 class="font-semibold text-[var(--text-secondary)] mb-2">Audio Player</h4>
                            <div class="bg-[var(--bg-audio-player)] p-3 rounded-lg shadow border border-[var(--border-primary)]">
                                <audio controls class="w-full h-10 speaker-modal-transcript" :key="selectedRecording.id" :src="'/audio/' + selectedRecording.id" :volume="playerVolume" @volumechange="onPlayerVolumeChange">
                                    Your browser does not support the audio element.
                                </audio>
                            </div>
                        </div>
                        
                        <!-- Transcript Section -->
                        <div class="flex-grow overflow-y-auto custom-scrollbar speaker-modal-transcript" @click="seekAudioFromEvent">
                            <div v-if="processedTranscription.isJson">
                                <div v-for="(segment, index) in processedTranscription.simpleSegments" :key="index" class="speaker-segment mb-2" :data-start-time="segment.startTime">
                                    <p>
                                        <span :class="[segment.color, 'speaker-tag', { 'speaker-highlight': highlightedSpeaker === segment.speakerId }]" :data-speaker-id="segment.speakerId">[${ segment.speaker }]</span>:
                                        <span class="word cursor-pointer hover:bg-[var(--bg-accent)] hover:text-[var(--text-accent)] rounded px-0.5">${ segment.sentence }</span>
                                    </p>
                                </div>
                            </div>
                            <div v-else v-html="highlightedTranscript"></div>
                        </div>
                    </div>
                </div>
                <div class="p-4 bg-[var(--bg-tertiary)] border-t border-[var(--border-primary)] flex-shrink-0">
                    <label class="flex items-center text-sm text-[var(--text-muted)]">
                        <input type="checkbox" v-model="regenerateSummaryAfterSpeakerUpdate" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                        <span class="ml-2">Regenerate summary after updating names</span>
                    </label>
                </div>
                <div class="bg-[var(--bg-tertiary)] px-6 py-4 flex justify-between items-center border-t border-[var(--border-primary)] flex-shrink-0 rounded-b-xl">
                    <div>
                        <button @click="autoIdentifySpeakers" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 flex items-center" :disabled="isAutoIdentifying">
                            <i class="fas fa-magic mr-2"></i>
                            <span v-if="!isAutoIdentifying">Auto Identify</span>
                            <span v-else>
                                <i class="fas fa-spinner fa-spin mr-2"></i>
                                Identifying...
                            </span>
                        </button>
                    </div>
                    <div class="flex space-x-3">
                        <button @click="closeSpeakerModal" class="px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-tertiary)]">Cancel</button>
                        <button 
                            @click="saveSpeakerNames" 
                            :disabled="!hasSpeakerNames"
                            :class="hasSpeakerNames 
                                ? 'px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 cursor-pointer' 
                                : 'px-4 py-2 bg-gray-400 text-gray-200 rounded-lg cursor-not-allowed'"
                        >
                            Save Names
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Color Scheme Modal -->
        <div v-if="showColorSchemeModal" @click="closeColorSchemeModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div @click.stop class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col overflow-hidden">
                <!-- Header -->
                <div class="p-6 border-b border-[var(--border-primary)] flex-shrink-0">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full flex items-center justify-center mr-4 shadow-lg">
                                <i class="fas fa-palette text-white text-lg"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold text-[var(--text-primary)]">Color Schemes</h3>
                                <p class="text-sm text-[var(--text-muted)]">Choose your preferred color theme</p>
                            </div>
                        </div>
                        <button @click="closeColorSchemeModal" class="text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors duration-200 rounded-full h-8 w-8 flex items-center justify-center hover:bg-[var(--bg-tertiary)]">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                
                <!-- Content -->
                <div class="p-6 overflow-y-auto custom-scrollbar modal-content flex-grow">
                    <!-- Current Mode Indicator -->
                    <div class="mb-6 p-4 bg-[var(--bg-tertiary)] rounded-lg border border-[var(--border-primary)]">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <i :class="isDarkMode ? 'fas fa-moon' : 'fas fa-sun'" class="text-[var(--text-accent)] mr-3"></i>
                                <div>
                                    <p class="font-medium text-[var(--text-primary)]">Current Mode: ${ isDarkMode ? 'Dark' : 'Light' }</p>
                                    <p class="text-sm text-[var(--text-muted)]">Switch between light and dark modes using the toggle in the header</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="text-sm font-medium text-[var(--text-secondary)]">Active Theme</p>
                                <p class="text-xs text-[var(--text-muted)]">${ colorSchemes[isDarkMode ? 'dark' : 'light'].find(s => s.id === currentColorScheme)?.name || 'Unknown' }</p>
                            </div>
                        </div>
                    </div>

                    <!-- Light Mode Themes -->
                    <div class="mb-8">
                        <h4 class="text-lg font-semibold text-[var(--text-primary)] mb-4 flex items-center">
                            <i class="fas fa-sun text-yellow-500 mr-2"></i>
                            Light Mode Themes
                        </h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div v-for="scheme in colorSchemes.light" :key="'light-' + scheme.id" 
                                 @click="selectColorScheme(scheme.id)"
                                 class="cursor-pointer p-4 rounded-lg border-2 transition-all duration-200 hover:shadow-lg"
                                 :class="!isDarkMode && currentColorScheme === scheme.id ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-[var(--border-secondary)] hover:border-[var(--border-accent)]'">
                                <div class="flex items-center justify-between mb-3">
                                    <h5 class="font-semibold text-[var(--text-primary)]">${ scheme.name }</h5>
                                    <div v-if="!isDarkMode && currentColorScheme === scheme.id" class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
                                        <i class="fas fa-check text-white text-xs"></i>
                                    </div>
                                </div>
                                <p class="text-sm text-[var(--text-muted)] mb-3">${ scheme.description }</p>
                                <!-- Color Preview -->
                                <div class="flex space-x-2">
                                    <div class="w-6 h-6 rounded-full" :class="scheme.id === 'blue' ? 'bg-blue-500' : scheme.id === 'emerald' ? 'bg-emerald-500' : scheme.id === 'purple' ? 'bg-purple-500' : scheme.id === 'rose' ? 'bg-rose-500' : scheme.id === 'amber' ? 'bg-amber-500' : 'bg-teal-500'"></div>
                                    <div class="w-6 h-6 rounded-full" :class="scheme.id === 'blue' ? 'bg-blue-100' : scheme.id === 'emerald' ? 'bg-emerald-100' : scheme.id === 'purple' ? 'bg-purple-100' : scheme.id === 'rose' ? 'bg-rose-100' : scheme.id === 'amber' ? 'bg-amber-100' : 'bg-teal-100'"></div>
                                    <div class="w-6 h-6 rounded-full bg-gray-100"></div>
                                    <div class="w-6 h-6 rounded-full bg-white border border-gray-200"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Dark Mode Themes -->
                    <div>
                        <h4 class="text-lg font-semibold text-[var(--text-primary)] mb-4 flex items-center">
                            <i class="fas fa-moon text-blue-400 mr-2"></i>
                            Dark Mode Themes
                        </h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div v-for="scheme in colorSchemes.dark" :key="'dark-' + scheme.id" 
                                 @click="selectColorScheme(scheme.id)"
                                 class="cursor-pointer p-4 rounded-lg border-2 transition-all duration-200 hover:shadow-lg"
                                 :class="isDarkMode && currentColorScheme === scheme.id ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-[var(--border-secondary)] hover:border-[var(--border-accent)]'">
                                <div class="flex items-center justify-between mb-3">
                                    <h5 class="font-semibold text-[var(--text-primary)]">${ scheme.name }</h5>
                                    <div v-if="isDarkMode && currentColorScheme === scheme.id" class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
                                        <i class="fas fa-check text-white text-xs"></i>
                                    </div>
                                </div>
                                <p class="text-sm text-[var(--text-muted)] mb-3">${ scheme.description }</p>
                                <!-- Color Preview -->
                                <div class="flex space-x-2">
                                    <div class="w-6 h-6 rounded-full" :class="scheme.id === 'blue' ? 'bg-blue-600' : scheme.id === 'emerald' ? 'bg-emerald-600' : scheme.id === 'purple' ? 'bg-purple-600' : scheme.id === 'rose' ? 'bg-rose-600' : scheme.id === 'amber' ? 'bg-amber-600' : 'bg-teal-600'"></div>
                                    <div class="w-6 h-6 rounded-full" :class="scheme.id === 'blue' ? 'bg-blue-900' : scheme.id === 'emerald' ? 'bg-emerald-900' : scheme.id === 'purple' ? 'bg-purple-900' : scheme.id === 'rose' ? 'bg-rose-900' : scheme.id === 'amber' ? 'bg-amber-900' : 'bg-teal-900'"></div>
                                    <div class="w-6 h-6 rounded-full bg-gray-700"></div>
                                    <div class="w-6 h-6 rounded-full bg-gray-900 border border-gray-600"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Footer -->
                <div class="bg-[var(--bg-tertiary)] px-6 py-4 flex justify-between items-center border-t border-[var(--border-primary)] flex-shrink-0">
                    <button @click="resetColorScheme" class="px-4 py-2 text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors duration-200 flex items-center">
                        <i class="fas fa-undo mr-2"></i>
                        Reset to Default
                    </button>
                    <button @click="closeColorSchemeModal" class="px-6 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors duration-200 flex items-center shadow-sm">
                        <i class="fas fa-check mr-2"></i>
                        Done
                    </button>
                </div>
            </div>
        </div>

        <!-- Overlay for mobile fly-in menu -->
        <div v-if="isMobileMenuOpen" @click="closeMobileMenu" class="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"></div>

        <div v-if="globalError" class="mb-4 p-4 bg-[var(--bg-danger-light)] border border-[var(--border-danger)] text-[var(--text-danger-strong)] rounded-lg" role="alert">
             <div class="flex justify-between items-center">
                <div>
                    <strong class="font-bold">Error:</strong>
                    <span class="block sm:inline ml-2">${ globalError }</span>
                </div>
                <button @click="globalError = null" class="text-[var(--text-danger-strong)] hover:text-[var(--text-danger)] font-bold">&times;</button>
            </div>
        </div>

        <!-- Sidebar toggle button will be positioned relative to the main container -->

        <main class="flex-grow"
             @dragover.prevent="dragover = true"
             @dragleave.prevent="handleDragLeave"
             @drop.prevent="handleDrop">

            <div v-if="dragover" class="absolute inset-0 flex items-center justify-center bg-[var(--border-focus)]/20 z-10 rounded-lg pointer-events-none border-4 border-dashed border-[var(--border-focus)]">
                <div class="text-center p-6 bg-[var(--bg-secondary)] rounded-lg shadow-xl">
                    <i class="fas fa-upload text-4xl text-[var(--text-accent)] mb-3"></i>
                    <p class="text-xl font-semibold text-[var(--text-secondary)]">Drop audio file(s) here to upload</p>
                </div>
            </div>

            {% if current_user.is_authenticated %}
            <div v-if="currentView === 'gallery'" class="flex-grow flex flex-col rounded-lg relative">
                <!-- Mobile Layout (shown only on mobile when recording is selected) -->
                <div v-if="selectedRecording" class="mobile-layout bg-[var(--bg-secondary)] rounded-lg shadow-md">
                    <!-- New Mobile Header Section -->
                    <div class="p-4 border-b border-[var(--border-primary)]">
                        <h3 class="text-xl font-semibold text-[var(--text-primary)] mb-2 truncate" :title="selectedRecording.title || 'Loading...'">
                            ${ selectedRecording.title || 'Loading...' }
                        </h3>
                        <div class="flex items-center justify-between mb-3">
                            <span v-if="selectedRecording.status" :class="getStatusClass(selectedRecording.status)" class="status-badge text-xs">
                                ${ formatStatus(selectedRecording.status) }
                            </span>
                            <div class="flex space-x-2 items-center">
                                <button @click="toggleInbox(selectedRecording)" 
                                        class="p-2 rounded-md text-sm transition-all hover:scale-105" 
                                        :class="selectedRecording.is_inbox ? 'bg-blue-100 text-blue-600 hover:bg-blue-200 dark:bg-blue-800 dark:text-blue-200 dark:hover:bg-blue-700' : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'"
                                        :title="selectedRecording.is_inbox ? 'Mark as Read' : 'Move to Inbox'">
                                    <i class="fas fa-inbox"></i>
                                </button>
                                <button @click="toggleHighlight(selectedRecording)" 
                                        class="p-2 rounded-md text-sm transition-all hover:scale-105"
                                        :class="selectedRecording.is_highlighted ? 'bg-yellow-100 text-yellow-600 hover:bg-yellow-200 dark:bg-yellow-700 dark:text-yellow-200 dark:hover:bg-yellow-600' : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'"
                                        :title="selectedRecording.is_highlighted ? 'Remove Highlight' : 'Highlight'">
                                    <i class="fas fa-star"></i>
                                </button>
                                <button @click="editRecording(selectedRecording)"
                                        class="p-2 rounded-md text-sm transition-all hover:scale-105 bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                                        title="Edit Details">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button @click="reprocessTranscription(selectedRecording.id)" v-if="selectedRecording && (selectedRecording.status === 'COMPLETED' || selectedRecording.status === 'FAILED')"
                                        class="p-2 rounded-md text-sm transition-all hover:scale-105 bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                                        :title="useAsrEndpoint ? 'Reprocess with ASR' : 'Reprocess transcription'">
                                    <i class="fas fa-redo-alt"></i>
                                </button>
                                <button @click="reprocessSummary(selectedRecording.id)" v-if="selectedRecording && (selectedRecording.status === 'COMPLETED' || selectedRecording.status === 'FAILED')"
                                        class="p-2 rounded-md text-sm transition-all hover:scale-105 bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                                        title="Reprocess summary">
                                    <i class="fas fa-sync-alt"></i>
                                </button>
                                <button @click="confirmReset(selectedRecording)" v-if="selectedRecording && (selectedRecording.status === 'PROCESSING' || selectedRecording.status === 'SUMMARIZING')"
                                        class="p-2 rounded-md text-sm transition-all hover:scale-105 bg-orange-100 text-orange-600 hover:bg-orange-200 dark:bg-orange-700 dark:text-orange-200 dark:hover:bg-orange-600"
                                        title="Reset Stuck Status">
                                    <i class="fas fa-power-off"></i>
                                </button>
                                <button @click="openSpeakerModal" v-if="identifiedSpeakers.length > 0"
                                        class="p-2 rounded-md text-sm transition-all hover:scale-105 bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                                        title="Identify Speakers">
                                    <i class="fas fa-user-tag"></i>
                                </button>
                                <button @click="confirmDelete(selectedRecording)"
                                        class="p-2 rounded-md text-sm transition-all hover:scale-105 bg-[var(--bg-danger-light)] text-[var(--text-danger-strong)] hover:bg-[var(--bg-danger)] hover:text-[var(--text-button)]"
                                        title="Delete Recording">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Mobile Audio Player Section -->
                    <div class="mobile-audio-section border-b border-[var(--border-primary)]">
                        <h4 class="font-semibold text-sm text-[var(--text-secondary)] mb-1">Audio Player</h4>
                        <div class="bg-[var(--bg-audio-player)] p-3 rounded-lg shadow border border-[var(--border-primary)]">
                            <audio controls class="w-full h-10" :key="selectedRecording.id" :src="'/audio/' + selectedRecording.id" :volume="playerVolume" @volumechange="onPlayerVolumeChange">
                                Your browser does not support the audio element.
                            </audio>
                        </div>
                    </div>

                    <!-- Mobile Tab Navigation -->
                    <div class="mobile-tab-nav">
                        <div class="tab-list">
                            <button @click="switchMobileTab('transcript')" 
                                    :class="selectedMobileTab === 'transcript' ? 'active' : ''"
                                    class="mobile-tab-button">
                                <i class="fas fa-file-text mr-1"></i> Transcript
                            </button>
                            <button @click="switchMobileTab('summary')" 
                                    :class="selectedMobileTab === 'summary' ? 'active' : ''"
                                    class="mobile-tab-button">
                                <i class="fas fa-file-alt mr-1"></i> Summary
                            </button>
                            <button @click="switchMobileTab('notes')" 
                                    :class="selectedMobileTab === 'notes' ? 'active' : ''"
                                    class="mobile-tab-button">
                                <i class="fas fa-sticky-note mr-1"></i> Notes
                            </button>
                            <button @click="switchMobileTab('chat')" 
                                    :class="selectedMobileTab === 'chat' ? 'active' : ''"
                                    class="mobile-tab-button">
                                <i class="fas fa-comments mr-1"></i> Chat
                            </button>
                            <button @click="switchMobileTab('metadata')" 
                                    :class="selectedMobileTab === 'metadata' ? 'active' : ''"
                                    class="mobile-tab-button">
                                <i class="fas fa-info-circle mr-1"></i> Metadata
                            </button>
                        </div>
                    </div>

                    <!-- Mobile Tab Content -->
                    <div class="mobile-tab-content">
                        <!-- Transcript Tab -->
                        <div class="mobile-tab-panel" :class="{ active: selectedMobileTab === 'transcript' }">
                            <div class="mobile-transcript-content">
                                <div class="mobile-content-header">
                                    <h4 class="mobile-content-title">Transcription</h4>
                                    <div class="mobile-content-actions">
                                        <!-- View Mode Toggle for Mobile -->
                                        <div v-if="processedTranscription.hasDialogue" class="view-mode-toggle">
                                            <button @click="toggleTranscriptionViewMode" 
                                                    :class="{ active: transcriptionViewMode === 'simple' }"
                                                    class="toggle-button">
                                                <i class="fas fa-list"></i> Simple
                                            </button>
                                            <button @click="toggleTranscriptionViewMode" 
                                                    :class="{ active: transcriptionViewMode === 'bubble' }"
                                                    class="toggle-button">
                                                <i class="fas fa-comments"></i> Bubbles
                                            </button>
                                        </div>
                                        <button @click="copyTranscription($event)" class="mobile-action-btn" title="Copy to clipboard">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                        <!-- Reprocess transcription button moved to main header -->
                                    </div>
                                </div>
                                <div class="mobile-content-box">
                                    <div v-if="selectedRecording.status === 'COMPLETED' || selectedRecording.status === 'SUMMARIZING'">
                                        <!-- Speaker Legend (if dialogue detected and bubble view) -->
                                        <div v-if="processedTranscription.hasDialogue && transcriptionViewMode === 'bubble'" class="speaker-legend" :class="{ expanded: legendExpanded }">
                                            <div class="speaker-legend-header" @click="legendExpanded = !legendExpanded">
                                                <div class="speaker-legend-title">
                                                    <i class="fas fa-users"></i>
                                                    <span>Speakers</span>
                                                    <span class="speaker-count-indicator">(${ processedTranscription.speakers.length })</span>
                                                </div>
                                                <i class="fas fa-chevron-down speaker-legend-toggle"></i>
                                            </div>
                                            <div class="speaker-legend-content">
                                                <div v-for="speaker in processedTranscription.speakers" :key="speaker.name" :class="[speaker.color, 'speaker-legend-item']">
                                                    <span class="speaker-name">${ speaker.name }</span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- Transcription Content -->
                                        <div v-if="processedTranscription.hasDialogue" @click="seekAudioFromEvent">
                                            <!-- Simple View -->
                                            <div v-if="transcriptionViewMode === 'simple'" class="transcription-simple-view">
                                                <div v-for="(segment, index) in processedTranscription.simpleSegments" :key="index" class="speaker-segment" :data-start-time="segment.startTime">
                                                    <div v-if="segment.showSpeaker" :class="[segment.color, 'speaker-tablet']">${ segment.speaker }</div>
                                                    <div class="speaker-text">
                                                        <span class="word">${ segment.sentence }</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Bubble View -->
                                            <div v-else class="transcription-with-speakers">
                                                <div v-for="(row, index) in processedTranscription.bubbleRows" :key="index"
                                                     :class="['bubble-row', { 'speaker-me': row.isMe }]">
                                                    <div v-for="(bubble, bubbleIndex) in row.bubbles" :key="bubbleIndex"
                                                         :class="[row.color, 'speaker-bubble', { 'speaker-me': row.isMe }]" :data-start-time="bubble.startTime">
                                                        <div class="speaker-bubble-content">
                                                            <span class="word">${ bubble.sentence }</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-else @click="seekAudioFromEvent">
                                            <div v-if="processedTranscription.simpleSegments && processedTranscription.simpleSegments.length > 0">
                                                <div v-for="(segment, index) in processedTranscription.simpleSegments" :key="index" 
                                                     class="cursor-pointer hover:bg-[var(--bg-tertiary)] p-1 rounded" 
                                                     :data-start-time="segment.startTime">
                                                    <span>${ segment.sentence }</span>
                                                </div>
                                            </div>
                                            <pre v-else class="whitespace-pre-wrap font-sans">${ processedTranscription.content || 'No transcription available.' }</pre>
                                        </div>
                                    </div>
                                    <div v-else-if="selectedRecording.status === 'FAILED'" class="text-[var(--text-danger)]">
                                        <p class="font-medium mb-2">Processing Failed:</p>
                                        <pre class="whitespace-pre-wrap font-sans">${ selectedRecording.transcription || 'An unknown error occurred.' }</pre>
                                    </div>
                                    <div v-else class="flex items-center justify-center text-[var(--text-muted)] h-full">
                                        <i class="fas fa-spinner fa-spin mr-2"></i> Transcription in progress...
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Summary Tab -->
                        <div class="mobile-tab-panel" :class="{ active: selectedMobileTab === 'summary' }">
                            <div class="mobile-summary-content">
                                <div class="mobile-content-header">
                                    <h4 class="mobile-content-title">Summary</h4>
                                    <div class="mobile-content-actions">
                                        <button @click="toggleEditSummary" class="mobile-action-btn" title="Edit Summary">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <!-- Reprocess summary and Identify Speakers buttons moved to main header -->
                                    </div>
                                </div>
                                <div class="mobile-content-box summary-box" style="overflow-y: auto;">
                                    <div v-if="selectedRecording.status === 'COMPLETED'" class="h-full">
                                        <div v-if="!editingSummary" class="prose-styles" v-html="selectedRecording.summary_html || selectedRecording.summary || 'No summary generated.'"></div>
                                        <textarea v-else v-model="selectedRecording.summary" @blur="saveInlineEdit('summary')" class="w-full h-full bg-transparent border-none focus:ring-0 focus:outline-none resize-none" placeholder="Enter summary"></textarea>
                                    </div>
                                    <div v-else-if="selectedRecording.status === 'FAILED'" class="text-[var(--text-danger)] h-full overflow-y-auto" v-html="selectedRecording.summary_html || selectedRecording.summary || 'Summary generation failed or was skipped.'"></div>
                                    <div v-else class="flex items-center justify-center text-[var(--text-muted)] h-full">
                                        <i class="fas fa-spinner fa-spin mr-2"></i> Summary pending...
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Notes Tab -->
                        <div class="mobile-tab-panel" :class="{ active: selectedMobileTab === 'notes' }">
                            <div class="mobile-notes-content">
                                <div class="mobile-content-header">
                                    <h4 class="mobile-content-title">Notes</h4>
                                    <div class="mobile-content-actions">
                                        <button @click="toggleEditNotes" class="mobile-action-btn" title="Edit Notes">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="mobile-content-box notes-box">
                                    <div v-if="!editingNotes" v-html="selectedRecording.notes_html || selectedRecording.notes || 'No notes'"></div>
                                    <textarea v-else v-model="selectedRecording.notes" @blur="saveInlineEdit('notes')" class="w-full h-full bg-transparent border-none focus:ring-0 focus:outline-none resize-none" placeholder="Enter notes"></textarea>
                                </div>
                            </div>
                        </div>

                        <!-- Chat Tab -->
                        <div class="mobile-tab-panel" :class="{ active: selectedMobileTab === 'chat' }">
                            <div class="mobile-chat-content">
                                <div class="mobile-chat-messages" ref="chatMessagesRef">
                                    <div v-if="chatMessages.length === 0" class="flex items-center justify-center h-full text-[var(--text-muted)]">
                                        <div class="text-center">
                                            <i class="fas fa-comments text-2xl mb-2"></i>
                                            <p>Ask questions about the transcript</p>
                                        </div>
                                    </div>
                                    <div v-for="(message, index) in chatMessages" :key="index" class="message" :class="message.role === 'user' ? 'user-message bg-[var(--bg-accent)] text-[var(--text-accent)]' : 'ai-message bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'">
                                        <div class="flex justify-between items-start">
                                            <div class="flex-grow" v-if="message.role === 'user'">${ message.content }</div>
                                            <div class="flex-grow" v-else v-html="message.html || message.content"></div>
                                            <button v-if="message.role === 'assistant'" @click="copyMessage(message.content, $event)" class="ml-2 text-[var(--text-light)] hover:text-[var(--text-muted)]" title="Copy response">
                                                <i class="fas fa-copy text-xs"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div v-if="isChatLoading" class="message ai-message bg-[var(--bg-tertiary)] text-[var(--text-secondary)]">
                                        <div class="flex items-center">
                                            <i class="fas fa-spinner fa-spin mr-2"></i> Thinking...
                                        </div>
                                    </div>
                                </div>
                                <div class="mobile-chat-input">
                                    <textarea
                                        v-model="chatInput" 
                                        @keyup.enter.exact="sendChatMessage"
                                        @keyup.enter.shift.exact.prevent="chatInput += '\n'"
                                        placeholder="Ask about the transcript... (Shift+Enter for new line)" 
                                        :disabled="isChatLoading || !selectedRecording || selectedRecording.status !== 'COMPLETED'"
                                        class="custom-scrollbar"
                                    ></textarea>
                                    <button 
                                        @click="sendChatMessage" 
                                        :disabled="!chatInput.trim() || isChatLoading || !selectedRecording || selectedRecording.status !== 'COMPLETED'"
                                    >
                                        <i class="fas fa-paper-plane"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Metadata Tab -->
                        <div class="mobile-tab-panel" :class="{ active: selectedMobileTab === 'metadata' }">
                            <div class="mobile-metadata-content">
                                <div class="mobile-content-header">
                                    <h4 class="mobile-content-title">Metadata</h4>
                                </div>
                                <div class="mobile-content-box">
                                    <!-- Participants Section (Editable) -->
                                    <div class="mb-4 p-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg">
                                        <div class="flex justify-between items-center mb-2">
                                            <dt class="font-medium text-[var(--text-primary)]">Participants</dt>
                                            <button @click="toggleEditParticipants" class="mobile-action-btn" title="Edit Participants">
                                                <i class="fas" :class="editingParticipants ? 'fa-check' : 'fa-edit'"></i>
                                            </button>
                                        </div>
                                        <div v-if="!editingParticipants" class="text-sm text-[var(--text-secondary)]">
                                            ${ selectedRecording.participants || 'None specified' }
                                        </div>
                                        <textarea v-else v-model="selectedRecording.participants" @blur="saveInlineEdit('participants')" class="w-full p-2 text-sm bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded focus:ring-[var(--ring-focus)] focus:border-[var(--border-focus)] text-[var(--text-primary)] resize-none" rows="2" placeholder="Enter participants"></textarea>
                                    </div>

                                    <!-- Other Metadata -->
                                    <div class="space-y-3">
                                        <div class="p-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg">
                                            <dt class="font-medium text-sm text-[var(--text-primary)] mb-0.5">Original Filename</dt>
                                            <dd class="text-sm text-[var(--text-secondary)] break-all">${ selectedRecording.original_filename || 'N/A' }</dd>
                                        </div>
                                        <div class="p-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg">
                                            <dt class="font-medium text-sm text-[var(--text-primary)] mb-0.5">File Size</dt>
                                            <dd class="text-sm text-[var(--text-secondary)]">${ formatFileSize(selectedRecording.file_size) }</dd>
                                        </div>
                                        <div class="p-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg">
                                            <dt class="font-medium text-sm text-[var(--text-primary)] mb-0.5">Created</dt>
                                            <dd class="text-sm text-[var(--text-secondary)]">${ new Date(selectedRecording.created_at).toLocaleString() }</dd>
                                        </div>
                                        <div v-if="selectedRecording.completed_at" class="p-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg">
                                            <dt class="font-medium text-sm text-[var(--text-primary)] mb-0.5">Processed On</dt>
                                            <dd class="text-sm text-[var(--text-secondary)]">${ new Date(selectedRecording.completed_at).toLocaleString() }</dd>
                                        </div>
                                        <div v-if="selectedRecording.processing_time_seconds" class="p-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg">
                                            <dt class="font-medium text-sm text-[var(--text-primary)] mb-0.5">Processing Time</dt>
                                            <dd class="text-sm text-[var(--text-secondary)]">${ formatDuration(selectedRecording.processing_time_seconds) }</dd>
                                        </div>
                                        <div class="p-3 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg">
                                            <div class="flex justify-between items-center mb-0.5">
                                                <dt class="font-medium text-sm text-[var(--text-primary)]">Meeting Date</dt>
                                                <button @click="toggleEditMobileMeetingDate" class="mobile-action-btn text-xs" :title="editingMobileMeetingDate ? 'Save Date' : 'Edit Date'">
                                                    <i class="fas" :class="editingMobileMeetingDate ? 'fa-check' : 'fa-edit'"></i>
                                                </button>
                                            </div>
                                            <div v-if="!editingMobileMeetingDate" 
                                                 @click="toggleEditMobileMeetingDate"
                                                 class="text-sm text-[var(--text-secondary)] cursor-pointer hover:text-[var(--text-accent)]">
                                                ${ selectedRecording.meeting_date ? formatDisplayDate(selectedRecording.meeting_date) : 'Click to add' }
                                            </div>
                                            <input v-else 
                                                   type="date" 
                                                   v-model="selectedRecording.meeting_date" 
                                                   @blur="saveInlineEdit('meeting_date'); editingMobileMeetingDate = false;" 
                                                   class="w-full p-1 text-sm bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded focus:ring-[var(--ring-focus)] focus:border-[var(--border-focus)] text-[var(--text-primary)]">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Desktop Layout (shown only on desktop) -->
                <div class="desktop-layout">
                <!-- Sidebar toggle button that appears when sidebar is collapsed - positioned at the left edge of main content, aligned with title -->
                <button v-if="isSidebarCollapsed && !isMobileScreen"  
                        @click="toggleSidebar" 
                        class="absolute -left-3 top-6 z-20 bg-gradient-to-r from-[var(--bg-accent)] to-[var(--bg-secondary)] p-2 pl-1 pr-3 rounded-r-lg shadow-lg text-[var(--text-accent)] hover:text-[var(--text-primary)] hover:shadow-xl transition-all duration-300 transform hover:translate-x-1 border-r border-t border-b border-[var(--border-accent)]"
                        title="Show Sidebar">
                    <i class="fas fa-chevron-right"></i>
                </button>
                
                <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 flex-grow">
                    <!-- Sidebar: Conditional classes for mobile fly-in and desktop normal -->
                    <div 
                        :class="{
                            'fixed inset-y-0 left-0 z-50 w-4/5 max-w-xs bg-[var(--bg-secondary)] shadow-xl transform transition-transform duration-300 ease-in-out': isMobileScreen,
                            'translate-x-0': isMobileScreen && isMobileMenuOpen,
                            '-translate-x-full': isMobileScreen && !isMobileMenuOpen,
                            'lg:col-span-1 sidebar-container max-h-85vh': !isMobileScreen
                        }"
                        v-show="isMobileMenuOpen || (!isMobileScreen && !isSidebarCollapsed)"
                        class="bg-[var(--bg-secondary)] p-4 rounded-lg shadow-md lg:sticky lg:top-6">
                         <div class="flex justify-between items-center mb-2 sticky top-0 bg-[var(--bg-secondary)] pb-2 border-b border-[var(--border-primary)] sidebar-header">
                            <h3 class="text-lg font-semibold text-[var(--text-primary)]">Recordings</h3>
                            <!-- Close button for mobile fly-in, hide button for desktop -->
                            <button @click="isMobileScreen ? closeMobileMenu() : toggleSidebar()"
                                    class="p-1 rounded-full text-[var(--text-muted)] hover:bg-[var(--bg-tertiary)] dark:text-gray-400 dark:hover:bg-gray-700 transition-colors duration-200"
                                    :title="isMobileScreen ? 'Close Menu' : (isSidebarCollapsed ? 'Show Sidebar' : 'Hide Sidebar')">
                                <i :class="isMobileScreen ? 'fas fa-times' : 'fas fa-chevron-left'"></i>
                             </button>
                        </div>

                        <!-- New Recording Button for Mobile Menu (Sidebar) -->
                        {% if current_user.is_authenticated %}
                        <button
                            v-if="isMobileScreen"
                            @click="switchToUploadView(); closeMobileMenu();"
                            class="w-full flex items-center justify-center mb-3 px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg shadow hover:bg-[var(--bg-button-hover)] focus:outline-none focus:ring-2 focus:ring-[var(--border-focus)] focus:ring-offset-2 transition duration-150 ease-in-out">
                            <i class="fas fa-plus mr-2"></i> New Recording
                        </button>
                        {% endif %}

                        <!-- Search input -->
                        <div class="relative mb-3 sticky top-12 z-10 bg-[var(--bg-secondary)]">
                            <div class="flex items-center bg-[var(--bg-tertiary)] rounded-lg border border-[var(--border-primary)] focus-within:border-[var(--border-focus)] focus-within:ring-1 focus-within:ring-[var(--ring-focus)]">
                                <i class="fas fa-search text-[var(--text-muted)] ml-3 mr-2"></i>
                                <input 
                                    v-model="searchQuery" 
                                    type="text" 
                                    placeholder="Search recordings..." 
                                    class="w-full py-2 pr-3 bg-transparent border-0 focus:ring-0 focus:outline-none text-sm text-[var(--text-primary)]"
                                />
                                <button 
                                    v-if="searchQuery" 
                                    @click="searchQuery = ''" 
                                    class="text-[var(--text-muted)] hover:text-[var(--text-primary)] mr-3"
                                >
                                    <i class="fas fa-times-circle"></i>
                                </button>
                            </div>
                        </div>
                         <div v-if="isLoadingRecordings" class="text-center text-[var(--text-muted)] py-4 sidebar-content">
                            <i class="fas fa-spinner fa-spin mr-2"></i> Loading recordings...
                        </div>
                        <div v-else-if="recordings.length === 0 && uploadQueue.length === 0" class="text-center text-[var(--text-muted)] py-4 flex-grow flex flex-col items-center justify-center sidebar-content">
                             <i class="fas fa-folder-open text-4xl text-[var(--text-light)] mb-3"></i>
                            <p>No recordings yet.</p>
                            <p>Upload one or drag & drop anywhere!</p>
                        </div>
                        <div v-else class="space-y-4 custom-scrollbar sidebar-content">
                            <div v-for="group in groupedRecordings" :key="group.title" class="mb-3">
                                <h4 class="font-medium text-[var(--text-muted)] text-xs uppercase tracking-wider mb-2 sticky top-0 bg-[var(--bg-secondary)] py-1">${ group.title }</h4>
                                <ul class="space-y-1">
                                    <li v-for="recording in group.items"
                                        :key="recording.id"
                                        @click="selectRecording(recording); if(isMobileScreen) closeMobileMenu();"
                                        class="cursor-pointer p-3 rounded-md flex justify-between items-center transition duration-150 ease-in-out"
                                        :class="{
                                            'bg-[var(--bg-accent)] hover:bg-[var(--bg-accent-hover)] ring-1 ring-[var(--border-accent)] text-[var(--text-accent)]': selectedRecording?.id === recording.id,
                                            'hover:bg-[var(--bg-tertiary)] text-[var(--text-primary)]': selectedRecording?.id !== recording.id
                                        }">
                                         <div class="flex items-center overflow-hidden mr-2">
                                            <i class="fas fa-file-audio text-[var(--text-accent)] mr-2 flex-shrink-0"></i>
                                            <span class="text-sm font-medium truncate" :title="recording.title || 'Loading title...'">${ recording.title || '(Processing...)' }</span>
                                        </div>
                                        <div class="flex space-x-2 flex-shrink-0 items-center">
                                            <span v-if="recording.status === 'PROCESSING'" class="text-xs text-[var(--text-info-strong)] italic flex items-center" title="Transcribing...">
                                                 <i class="fas fa-spinner fa-spin mr-1"></i> Transcribing
                                            </span>
                                             <span v-else-if="recording.status === 'SUMMARIZING'" class="text-xs text-[var(--text-warn-strong)] italic flex items-center" title="Generating Summary...">
                                                <i class="fas fa-spinner fa-spin mr-1"></i> Summarizing
                                            </span>
                                            <span v-else-if="recording.status === 'PENDING'" class="text-xs text-[var(--text-pending-strong)] italic flex items-center" title="Waiting...">
                                                <i class="fas fa-clock mr-1"></i> Pending
                                            </span>
                                            <span v-else-if="recording.status === 'FAILED'" class="text-xs text-[var(--text-danger-strong)] italic flex items-center" title="Processing Failed">
                                                <i class="fas fa-exclamation-triangle mr-1"></i> Failed
                                            </span>
                                            <span v-if="recording.is_inbox" class="text-blue-500 cursor-pointer hover:text-blue-700" title="Mark as Read" @click.stop="toggleInbox(recording)">
                                                <i class="fas fa-inbox"></i>
                                            </span>
                                            <span v-if="recording.is_highlighted" class="text-yellow-500" title="Highlighted">
                                                <i class="fas fa-star"></i>
                                            </span>
                                             <button @click.stop="editRecording(recording)" class="text-[var(--text-muted)] hover:text-[var(--text-accent)] text-xs p-1 rounded hover:bg-[var(--bg-tertiary)]" title="Edit Details">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button @click.stop="confirmDelete(recording)" class="text-[var(--text-muted)] hover:text-[var(--text-danger)] text-xs p-1 rounded hover:bg-[var(--bg-tertiary)]" title="Delete Recording">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                     <div v-if="!isMobileScreen" :class="(!isMobileScreen && isSidebarCollapsed) ? 'lg:col-span-4' : 'lg:col-span-3'" class="bg-[var(--bg-secondary)] p-6 rounded-lg shadow-md flex flex-col max-h-85vh main-content-area">
                        <div v-if="selectedRecording" class="flex-grow flex flex-col">
                            <div class="recording-header">
                                <div class="recording-title-row">
                                    <div class="responsive-title-container">
                                         <h3 class="text-2xl font-semibold text-[var(--text-primary)] flex items-center">
                                            <span class="responsive-title">${ selectedRecording.title || 'Loading...' }</span>
                                         </h3>
                                    </div>
                                    <div class="responsive-button-container">
                                        <button @click="toggleInbox(selectedRecording)"
                                                class="p-2 rounded-md text-sm transition-all hover:scale-105"
                                                :class="selectedRecording.is_inbox ? 'bg-blue-100 text-blue-600 hover:bg-blue-200 dark:bg-blue-800 dark:text-blue-200 dark:hover:bg-blue-700' : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'"
                                                :title="selectedRecording.is_inbox ? 'Mark as Read' : 'Move to Inbox'">
                                            <i class="fas fa-inbox"></i>
                                        </button>
                                        <button @click="toggleHighlight(selectedRecording)" 
                                                class="p-2 rounded-md text-sm transition-all hover:scale-105"
                                                :class="selectedRecording.is_highlighted ? 'bg-yellow-100 text-yellow-600 hover:bg-yellow-200 dark:bg-yellow-700 dark:text-yellow-200 dark:hover:bg-yellow-600' : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'"
                                                :title="selectedRecording.is_highlighted ? 'Remove Highlight' : 'Highlight'">
                                            <i class="fas fa-star"></i>
                                        </button>
                                        <button @click="editRecording(selectedRecording)"
                                                class="p-2 rounded-md text-sm transition-all hover:scale-105 bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                                                title="Edit Details">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button @click="reprocessTranscription(selectedRecording.id)" v-if="selectedRecording && (selectedRecording.status === 'COMPLETED' || selectedRecording.status === 'FAILED')"
                                                class="p-2 rounded-md text-sm transition-all hover:scale-105 bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                                                :title="useAsrEndpoint ? 'Reprocess with ASR' : 'Reprocess transcription'">
                                            <i class="fas fa-redo-alt"></i>
                                        </button>
                                        <button @click="reprocessSummary(selectedRecording.id)" v-if="selectedRecording && (selectedRecording.status === 'COMPLETED' || selectedRecording.status === 'FAILED')"
                                                class="p-2 rounded-md text-sm transition-all hover:scale-105 bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                                                title="Reprocess summary">
                                            <i class="fas fa-sync-alt"></i>
                                        </button>
                                        <button @click="confirmReset(selectedRecording)" v-if="selectedRecording && (selectedRecording.status === 'PROCESSING' || selectedRecording.status === 'SUMMARIZING')"
                                                class="p-2 rounded-md text-sm transition-all hover:scale-105 bg-orange-100 text-orange-600 hover:bg-orange-200 dark:bg-orange-700 dark:text-orange-200 dark:hover:bg-orange-600"
                                                title="Reset Stuck Status">
                                            <i class="fas fa-power-off"></i>
                                        </button>
                                        <button @click="openSpeakerModal" v-if="identifiedSpeakers.length > 0"
                                                class="p-2 rounded-md text-sm transition-all hover:scale-105 bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
                                                title="Identify Speakers">
                                            <i class="fas fa-user-tag"></i>
                                        </button>
                                        <button @click="confirmDelete(selectedRecording)"
                                                class="p-2 rounded-md text-sm transition-all hover:scale-105 bg-[var(--bg-danger-light)] text-[var(--text-danger-strong)] hover:bg-[var(--bg-danger)] hover:text-[var(--text-button)]"
                                                title="Delete Recording">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="recording-metadata-row">
                                    <!-- Display Meeting Date with edit functionality -->
                                    <div class="metadata-item">
                                        <i class="fas fa-calendar-alt metadata-icon"></i>
                                        <span class="metadata-label">Meeting:</span>
                                        <span v-if="!editingMeetingDate" 
                                              @click="toggleEditMeetingDate" 
                                              class="metadata-value editable">
                                            ${ selectedRecording.meeting_date ? formatDisplayDate(selectedRecording.meeting_date) : 'Click to add' }
                                        </span>
                                        <span v-else class="inline-flex items-center">
                                            <input type="date" 
                                                   v-model="selectedRecording.meeting_date" 
                                                   @blur="saveInlineEdit('meeting_date')" 
                                                   class="metadata-edit-input" />
                                            <button @click="saveInlineEdit('meeting_date')" 
                                                    class="metadata-edit-button">
                                                <i class="fas fa-check"></i>
                                            </button>
                                        </span>
                                    </div>
                                    
                                    <div class="metadata-item">
                                        <i class="fas fa-clock metadata-icon"></i>
                                        <span class="metadata-label">Created:</span>
                                        <span class="metadata-value">${ new Date(selectedRecording.created_at).toLocaleString() }</span>
                                    </div>
                                    
                                    <!-- Status Badge -->
                                    <div v-if="selectedRecording.status !== 'COMPLETED'" class="metadata-item">
                                        <i class="fas fa-info-circle metadata-icon"></i>
                                        <span class="metadata-label">Status:</span>
                                        <span :class="getStatusClass(selectedRecording.status)" class="status-badge">
                                            ${ formatStatus(selectedRecording.status) }
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <!-- Main content area with flex layout -->
                            <div id="mainContentColumns" class="flex flex-col md:flex-row flex-grow overflow-y-auto" style="max-height: 75vh;">
                                <!-- Left Column: Participants, Transcription, Summary & Notes -->
                                <div id="leftMainColumn" class="content-column left-content" style="width: 40%;">
                                    <!-- Participants Section -->
                                    <div class="participants-section">
                                        <div class="flex justify-between items-center mb-1">
                                            <h4 class="font-semibold text-[var(--text-secondary)]">Participants</h4>
                                            <button @click="toggleEditParticipants" class="text-xs text-[var(--text-muted)] hover:text-[var(--text-accent)] p-1 rounded">
                                                <i class="fas" :class="editingParticipants ? 'fa-check' : 'fa-edit'"></i>
                                            </button>
                                        </div>
                                        <div v-if="!editingParticipants" class="text-sm bg-[var(--bg-tertiary)] p-3 rounded-xl border border-[var(--border-primary)] min-h-[40px] text-[var(--text-secondary)]">${ selectedRecording.participants || 'None specified' }</div>
                                        <textarea v-else v-model="selectedRecording.participants" @blur="saveInlineEdit('participants')" class="text-sm bg-[var(--bg-tertiary)] p-3 rounded border border-[var(--border-primary)] min-h-[40px] w-full focus:ring-[var(--ring-focus)] focus:border-[var(--border-focus)] text-[var(--text-secondary)]" placeholder="Enter participants"></textarea>
                                    </div>
                                    
                                    <!-- Transcription Section -->
                                    <div class="transcription-section" :style="{ flex: transcriptionFlex }">
                                        <div class="flex justify-between items-center mb-1">
                                            <h4 class="font-semibold text-[var(--text-secondary)]">Transcription</h4>
                                            <div class="flex items-center space-x-2">
                                                <!-- View Mode Toggle - compact tablet style next to copy button -->
                                                <div v-if="processedTranscription.hasDialogue" class="view-mode-toggle">
                                                    <button @click="toggleTranscriptionViewMode" 
                                                            :class="{ active: transcriptionViewMode === 'simple' }"
                                                            class="toggle-button">
                                                        <i class="fas fa-list"></i> Simple
                                                    </button>
                                                    <button @click="toggleTranscriptionViewMode" 
                                                            :class="{ active: transcriptionViewMode === 'bubble' }"
                                                            class="toggle-button">
                                                        <i class="fas fa-comments"></i> Bubbles
                                                    </button>
                                                </div>
                                                <button @click="copyTranscription($event)" class="text-xs text-[var(--text-muted)] hover:text-[var(--text-accent)] p-1 rounded" title="Copy to clipboard">
                                                    <i class="fas fa-copy"></i>
                                                </button>
                                            </div>
                                        </div>
                                        
                                        <div class="transcription-box custom-scrollbar relative">
                                            <div v-if="selectedRecording.status === 'COMPLETED' || selectedRecording.status === 'SUMMARIZING'" class="copyable">
                                                <!-- Speaker Legend (if dialogue detected and bubble view) -->
                                                <div v-if="processedTranscription.hasDialogue && transcriptionViewMode === 'bubble'" class="speaker-legend" :class="{ expanded: legendExpanded }">
                                                    <div class="speaker-legend-header" @click="legendExpanded = !legendExpanded">
                                                        <div class="speaker-legend-title">
                                                            <i class="fas fa-users"></i>
                                                            <span>Speakers</span>
                                                            <span class="speaker-count-indicator">(${ processedTranscription.speakers.length })</span>
                                                        </div>
                                                        <i class="fas fa-chevron-down speaker-legend-toggle"></i>
                                                    </div>
                                                    <div class="speaker-legend-content">
                                                        <div v-for="speaker in processedTranscription.speakers" :key="speaker.name" :class="[speaker.color, 'speaker-legend-item']">
                                                            <span class="speaker-name">${ speaker.name }</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <!-- Transcription Content -->
                                                <div v-if="processedTranscription.hasDialogue" @click="seekAudioFromEvent">
                                                    <!-- Simple View -->
                                                    <div v-if="transcriptionViewMode === 'simple'" class="transcription-simple-view">
                                                        <div v-for="(segment, index) in processedTranscription.simpleSegments" :key="index" class="speaker-segment" :data-start-time="segment.startTime">
                                                            <div v-if="segment.showSpeaker" :class="[segment.color, 'speaker-tablet']">${ segment.speaker }</div>
                                                            <div class="speaker-text">
                                                                <span class="word">${ segment.sentence }</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- Bubble View -->
                                                    <div v-else class="transcription-with-speakers">
                                                        <div v-for="(row, index) in processedTranscription.bubbleRows" :key="index"
                                                             :class="['bubble-row', { 'speaker-me': row.isMe }]">
                                                            <div v-for="(bubble, bubbleIndex) in row.bubbles" :key="bubbleIndex"
                                                                 :class="[row.color, 'speaker-bubble', { 'speaker-me': row.isMe }]" :data-start-time="bubble.startTime">
                                                                <div class="speaker-bubble-content">
                                                                    <span class="word">${ bubble.sentence }</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div v-else @click="seekAudioFromEvent">
                                                    <div v-if="processedTranscription.simpleSegments && processedTranscription.simpleSegments.length > 0">
                                                        <div v-for="(segment, index) in processedTranscription.simpleSegments" :key="index" 
                                                             class="cursor-pointer hover:bg-[var(--bg-tertiary)] p-1 rounded" 
                                                             :data-start-time="segment.startTime">
                                                            <span>${ segment.sentence }</span>
                                                        </div>
                                                    </div>
                                                    <pre v-else class="whitespace-pre-wrap font-sans">${ processedTranscription.content || 'No transcription available.' }</pre>
                                                </div>
                                            </div>
                                            <div v-else-if="selectedRecording.status === 'FAILED'" class="text-[var(--text-danger)]">
                                                <p class="font-medium mb-2">Processing Failed:</p>
                                                <pre class="whitespace-pre-wrap font-sans">${ selectedRecording.transcription || 'An unknown error occurred.' }</pre>
                                            </div>
                                            <div v-else class="flex items-center justify-center text-[var(--text-muted)] h-full">
                                                <i class="fas fa-spinner fa-spin mr-2"></i> Transcription in progress...
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Resizable Handle -->
                                    <div 
                                        class="resize-handle cursor-ns-resize h-2 bg-[var(--border-primary)] hover:bg-[var(--border-accent)] rounded-full my-1 flex items-center justify-center"
                                        title="Drag to resize">
                                        <div class="w-10 h-1 bg-[var(--text-light)] rounded-full"></div>
                                    </div>
                                    
                                    <!-- Tabs Section -->
                                    <div class="tab-section" :style="{ flex: tabsFlex }">
                                        <div class="border-b border-[var(--border-primary)]">
                                            <div class="flex justify-between items-center">
                                                <nav class="-mb-px flex space-x-4" aria-label="Tabs">
                                                    <button @click="selectedTab = 'summary'" 
                                                            :class="selectedTab === 'summary' ? 'border-[var(--border-focus)] text-[var(--text-accent)]' : 'border-transparent text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'"
                                                            class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm">
                                                        Summary
                                                    </button>
                                                    <button @click="selectedTab = 'notes'" 
                                                            :class="selectedTab === 'notes' ? 'border-[var(--border-focus)] text-[var(--text-accent)]' : 'border-transparent text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'"
                                                            class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm">
                                                        Notes
                                                    </button>
                                                    <button @click="selectedTab = 'metadata'" 
                                                            :class="selectedTab === 'metadata' ? 'border-[var(--border-focus)] text-[var(--text-accent)]' : 'border-transparent text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'"
                                                            class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm">
                                                        Metadata
                                                    </button>
                                                </nav>
                                                <div class="flex space-x-1 items-center h-full py-3">
                                                    <!-- Summary buttons - shown when summary tab is active -->
                                                    <template v-if="selectedTab === 'summary'">
                                                        <button @click="toggleEditSummary" class="text-xs text-[var(--text-muted)] hover:text-[var(--text-accent)] p-1 rounded" title="Edit Summary">
                                                            <i class="fas fa-edit"></i>
                                                        </button>
                                                    </template>
                                                    <!-- Notes buttons - shown when notes tab is active -->
                                                    <template v-if="selectedTab === 'notes'">
                                                        <button @click="toggleEditNotes" class="text-xs text-[var(--text-muted)] hover:text-[var(--text-accent)] p-1 rounded" title="Edit Notes">
                                                            <i class="fas fa-edit"></i>
                                                        </button>
                                                    </template>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="pt-4 flex-grow flex flex-col min-h-0"> 
                                            <!-- Summary Panel -->
                                            <div v-show="selectedTab === 'summary'" class="h-full">
                                                <div v-if="selectedRecording.status === 'COMPLETED'" class="h-full">
                                                    <div v-if="!editingSummary" class="content-box h-full flex flex-col min-h-0">
                                                        <div class="summary-box custom-scrollbar" v-html="selectedRecording.summary_html || selectedRecording.summary || 'No summary generated.'">
                                                        </div>
                                                    </div>
                                                    <textarea v-else v-model="selectedRecording.summary" @blur="saveInlineEdit('summary')" class="summary-box custom-scrollbar bg-[var(--bg-tertiary)] border-[var(--border-primary)] text-[var(--text-secondary)] w-full focus:ring-[var(--ring-focus)] focus:border-[var(--border-focus)] tab-content-box" placeholder="Enter summary"></textarea>
                                                </div>
                                                <div v-else-if="selectedRecording.status === 'FAILED'" class="summary-box text-[var(--text-danger)] custom-scrollbar bg-[var(--bg-tertiary)] border-[var(--border-primary)] tab-content-box" v-html="selectedRecording.summary_html || selectedRecording.summary || 'Summary generation failed or was skipped.'">
                                                </div>
                                                <div v-else class="h-24 flex items-center justify-center p-4 bg-[var(--bg-tertiary)] rounded border border-[var(--border-primary)] text-[var(--text-muted)]">
                                                    <i class="fas fa-spinner fa-spin mr-2"></i> Summary pending...
                                                </div>
                                            </div>
                                            
                                            <!-- Notes Panel -->
                                            <div v-show="selectedTab === 'notes'" class="h-full">
                                                <div v-if="!editingNotes" class="content-box h-full flex flex-col min-h-0">
                                                    <div class="notes-box custom-scrollbar" v-html="selectedRecording.notes_html || selectedRecording.notes || 'No notes'"></div>
                                                </div>
                                                <textarea v-else v-model="selectedRecording.notes" @blur="saveInlineEdit('notes')" class="notes-box custom-scrollbar w-full focus:ring-[var(--ring-focus)] focus:border-[var(--border-focus)] tab-content-box flex-1 height-100" placeholder="Enter notes"></textarea>
                                            </div>
                                            
                                            <!-- Metadata Panel (in separate tab) -->
                                            <div v-show="selectedTab === 'metadata'" class="h-full">
                                                <div class="metadata-panel custom-scrollbar tab-content-box">
                                                    <dl class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-4 text-sm">
                                                        <div class="metadata-grid-item">
                                                            <dt><i class="fas fa-file-alt mr-2 text-[var(--text-muted)]"></i>Original Filename</dt>
                                                            <dd>${ selectedRecording.original_filename || 'N/A' }</dd>
                                                        </div>
                                                        <div class="metadata-grid-item">
                                                            <dt><i class="fas fa-database mr-2 text-[var(--text-muted)]"></i>File Size</dt>
                                                            <dd>${ formatFileSize(selectedRecording.file_size) }</dd>
                                                        </div>
                                                        <div v-if="selectedRecording.completed_at" class="metadata-grid-item">
                                                            <dt><i class="fas fa-check-circle mr-2 text-[var(--text-muted)]"></i>Processed On</dt>
                                                            <dd>${ new Date(selectedRecording.completed_at).toLocaleString() }</dd>
                                                        </div>
                                                        <div v-if="selectedRecording.processing_time_seconds" class="metadata-grid-item">
                                                            <dt><i class="fas fa-hourglass-half mr-2 text-[var(--text-muted)]"></i>Processing Time</dt>
                                                            <dd>${ formatDuration(selectedRecording.processing_time_seconds) }</dd>
                                                        </div>
                                                    </dl>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Resizer Handle for Main Columns -->
                                <div id="mainColumnResizer" 
                                     class="hidden md:flex items-center justify-center w-2 bg-transparent cursor-ew-resize flex-shrink-0 mx-1 group" 
                                     title="Drag to resize columns">
                                    <div class="w-1 h-10 bg-[var(--text-light)] group-hover:bg-[var(--border-accent)] rounded-full transition-colors duration-150"></div>
                                </div>

                                <!-- Right Column: Audio & Chat -->
                                <div id="rightMainColumn" class="content-column right-content flex-grow">
                                    <!-- Audio Player Section -->
                                    <div class="audio-section">
                                        <h4 class="font-semibold text-[var(--text-secondary)] mb-2">Audio Player</h4>
                                        <div class="bg-[var(--bg-audio-player)] p-3 rounded-lg shadow border border-[var(--border-primary)]">
                                            <audio controls class="w-full h-10" :key="selectedRecording.id" :src="'/audio/' + selectedRecording.id" :volume="playerVolume" @volumechange="onPlayerVolumeChange">
                                                Your browser does not support the audio element.
                                            </audio>
                                        </div>
                                    </div>

                                    <!-- Chat Section -->
                                    <div class="chat-section">
                                        <h4 class="font-semibold text-[var(--text-secondary)] mb-2 flex-shrink-0">Chat with Transcript</h4>
                                        <div class="chat-container border-[var(--border-primary)] bg-[var(--bg-secondary)] h-full"> 
                                            <div class="chat-messages custom-scrollbar" ref="chatMessagesRef">
                                                <div v-if="chatMessages.length === 0" class="flex items-center justify-center h-full text-[var(--text-muted)]">
                                                    <div class="text-center">
                                                        <i class="fas fa-comments text-2xl mb-2"></i>
                                                        <p>Ask questions about the transcript</p>
                                                    </div>
                                                </div>
                                                <div v-for="(message, index) in chatMessages" :key="index" class="message" :class="message.role === 'user' ? 'user-message bg-[var(--bg-accent)] text-[var(--text-accent)]' : 'ai-message bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'">
                                                    <div class="flex justify-between items-start">
                                                        <div class="flex-grow" v-if="message.role === 'user'">${ message.content }</div>
                                                        <div class="flex-grow" v-else v-html="message.html || message.content"></div>
                                                        <button v-if="message.role === 'assistant'" @click="copyMessage(message.content, $event)" class="ml-2 text-[var(--text-light)] hover:text-[var(--text-muted)]" title="Copy response">
                                                            <i class="fas fa-copy text-xs"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div v-if="isChatLoading" class="message ai-message bg-[var(--bg-tertiary)] text-[var(--text-secondary)]">
                                                    <div class="flex items-center">
                                                        <i class="fas fa-spinner fa-spin mr-2"></i> Thinking...
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="chat-input-container border-t-[var(--border-primary)]">
                                                <textarea 
                                                    v-model="chatInput" 
                                                    @keyup.enter.exact="sendChatMessage"
                                                    @keyup.enter.shift.exact.prevent="chatInput += '\n'"
                                                    placeholder="Ask about the transcript... (Shift+Enter for new line)" 
                                                    class="flex-grow px-3 py-2 border-0 focus:ring-0 focus:outline-none bg-[var(--bg-input)] text-[var(--text-primary)] placeholder-[var(--text-muted)] resize-none custom-scrollbar"
                                                    :disabled="isChatLoading || !selectedRecording || selectedRecording.status !== 'COMPLETED'"
                                                    rows="3"
                                                ></textarea>
                                                <button 
                                                    @click="sendChatMessage" 
                                                    class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-md hover:bg-[var(--bg-button-hover)] disabled:bg-[var(--bg-tertiary)] disabled:text-[var(--text-muted)] disabled:cursor-not-allowed"
                                                    :disabled="!chatInput.trim() || isChatLoading || !selectedRecording || selectedRecording.status !== 'COMPLETED'"
                                                >
                                                    <i class="fas" :class="isChatLoading ? 'fa-spinner fa-spin' : 'fa-paper-plane'"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-else class="flex flex-col items-center justify-center text-center text-[var(--text-muted)] flex-grow">
                             <i class="fas fa-hand-pointer text-4xl text-[var(--text-light)] mb-4"></i>
                            <p class="text-lg font-medium mb-2">Select a recording from the list to view details.</p>
                            <p>Or, drag and drop audio file(s) anywhere on this page to upload.</p>
                        </div>
                    </div>
                </div>
                </div>

                <!-- Mobile fallback when no recording selected -->
                <div v-if="!selectedRecording" class="mobile-layout">
                    <div class="flex flex-col items-center justify-center text-center text-[var(--text-muted)] h-full p-8">
                        <i class="fas fa-hand-pointer text-4xl text-[var(--text-light)] mb-4"></i>
                        <p class="text-lg font-medium mb-2">Select a recording from the menu to view details.</p>
                        <p>Tap the menu button in the header to browse recordings.</p>
                    </div>
                </div>
            </div>

             <div v-if="currentView === 'upload'"
                 class="flex-grow flex items-center justify-center p-4">
                 <div class="w-full max-w-lg bg-[var(--bg-secondary)] p-8 rounded-xl shadow-lg border border-[var(--border-primary)] text-center drag-area"
                     :class="{'border-[var(--border-focus)] bg-[var(--bg-accent)]': dragover}">
                    <div class="py-8">
                        <i class="fas fa-cloud-upload-alt text-5xl mb-5 text-[var(--text-accent)]"></i>
                         <h2 class="text-xl font-semibold text-[var(--text-secondary)] mb-2">Upload New Recordings</h2>
                        <p class="text-[var(--text-muted)] mb-4">Drag & drop your audio files here or click below.</p>
                         <input type="file" @change="handleFileSelect" accept="audio/*" class="hidden" ref="fileInput" multiple>
                        <div class="flex flex-col sm:flex-row sm:justify-center sm:items-center mt-4 space-y-3 sm:space-y-0 sm:space-x-3">
                            <template v-if="!isRecording">
                                <button @click="$refs.fileInput.click()" class="w-full sm:w-auto px-6 py-3 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] shadow-sm transition duration-150 ease-in-out flex items-center justify-center">
                                    <i class="fas fa-file-import mr-2"></i> Select Files
                                </button>
                                <!-- New Record Audio Button -->
                                <button @click="startRecording" v-if="canRecordAudio" class="w-full sm:w-auto px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 shadow-sm transition duration-150 ease-in-out flex items-center justify-center">
                                    <i class="fas fa-microphone mr-2"></i> Record Audio
                                </button>
                            </template>
                            <button @click="stopRecording" v-if="isRecording" class="w-full sm:w-auto px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 shadow-sm transition duration-150 ease-in-out flex items-center justify-center">
                                <i class="fas fa-stop mr-2"></i> Stop Recording
                            </button>
                        </div>
                        <div v-if="isRecording" class="mt-3 text-[var(--text-muted)]">
                            <i class="fas fa-circle text-red-500 fa-xs blink mr-1"></i> Recording: ${ formatTime(recordingTime) }
                        </div>
                        <div v-if="audioBlobURL" class="mt-4 p-4 border border-[var(--border-primary)] rounded-lg bg-[var(--bg-tertiary)]">
                            <p class="text-sm text-[var(--text-secondary)] mb-2 font-medium">Preview your recording:</p>
                            <audio :src="audioBlobURL" controls class="w-full rounded" :volume="playerVolume" @volumechange="onPlayerVolumeChange"></audio>
                            <div class="mt-3 flex flex-col sm:flex-row sm:justify-center sm:items-center space-y-2 sm:space-y-0 sm:space-x-2">
                                <button @click="uploadRecordedAudio" class="w-full sm:w-auto px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)]">
                                    <i class="fas fa-upload mr-1"></i> Upload Recording
                                </button>
                                <button @click="discardRecording" class="w-full sm:w-auto px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500">
                                    <i class="fas fa-trash mr-1"></i> Discard
                                </button>
                            </div>
                        </div>
                        <p v-if="!canRecordAudio && currentView === 'upload' && !isRecording && !audioBlobURL" class="mt-4 text-sm text-[var(--text-muted)]">
                            Audio recording may not be supported or permission is denied.
                        </p>
                         <p class="text-xs text-[var(--text-light)] mt-6">Max file size per file: ${ maxFileSizeMB } MB</p>
                    </div>
                </div>
            </div>

            {% else %}
            <div class="flex-grow flex items-center justify-center">
                <div class="text-center max-w-lg p-8 bg-[var(--bg-secondary)] rounded-xl shadow-lg border border-[var(--border-primary)]">
                    <i class="fas fa-lock text-5xl mb-4 text-[var(--text-accent)]"></i>
                    <h2 class="text-2xl font-semibold text-[var(--text-primary)] mb-4">Welcome to Speakr</h2>
                    <p class="text-[var(--text-secondary)] mb-6">
                        Speakr is an audio transcription and summarization app that helps you convert your audio recordings into text and generate summaries.
                    </p>
                    <div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4">
                        <a href="{{ url_for('login') }}" class="px-6 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg shadow hover:bg-[var(--bg-button-hover)] focus:outline-none focus:ring-2 focus:ring-[var(--border-focus)] focus:ring-offset-2 transition duration-150 ease-in-out">
                            <i class="fas fa-sign-in-alt mr-2"></i> Login
                        </a>
                        <a href="{{ url_for('register') }}" class="px-6 py-2 text-[var(--text-secondary)] hover:text-[var(--text-accent)] border border-[var(--border-secondary)] rounded-lg">
                            <i class="fas fa-user-plus mr-2"></i> Register
                        </a>
                    </div>
                </div>
            </div>
            {% endif %}
            </main>

        <footer class="text-center py-4 mt-8 text-xs text-[var(--text-light)] border-t border-[var(--border-primary)]">
            Speakr &copy; ${ new Date().getFullYear() }
            <span class="mx-2">|</span>
            <a href="https://github.com/murtaza-nasir/speakr" target="_blank" rel="noopener noreferrer" class="hover:text-[var(--text-accent)] transition-colors duration-200">
                <i class="fab fa-github mr-1"></i>
                GitHub
            </a>
        </footer>

         <div v-if="showEditModal" @click="cancelEdit" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm transition-all duration-300 ease-in-out">
             <div @click.stop class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-lg max-h-[90vh] flex flex-col overflow-hidden transform transition-all duration-300 ease-in-out">
                <!-- Header with gradient background -->
                <div class="bg-gradient-to-r from-[var(--bg-accent)] to-[var(--bg-secondary)] p-5 flex justify-between items-center flex-shrink-0">
                    <h3 class="text-xl font-bold text-[var(--text-primary)] flex items-center">
                        <i class="fas fa-edit mr-2 text-[var(--text-accent)]"></i>
                        Edit Recording Details
                    </h3>
                    <button @click="cancelEdit" class="text-[var(--text-light)] hover:text-[var(--text-primary)] transition-colors duration-200 rounded-full h-8 w-8 flex items-center justify-center hover:bg-[var(--bg-tertiary)]">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <!-- Form content with custom scrollbar -->
                <div class="p-6 overflow-y-auto custom-scrollbar modal-content flex-grow">
                    <div v-if="editingRecording" class="space-y-5">
                        <!-- Title field with icon -->
                        <div class="form-group">
                            <label class="flex items-center text-sm font-medium text-[var(--text-secondary)] mb-1.5">
                                <i class="fas fa-heading text-[var(--text-accent)] mr-2"></i>
                                Title
                            </label>
                            <div class="relative">
                                <input 
                                    v-model="editingRecording.title" 
                                    class="pl-3 pr-3 py-2.5 block w-full rounded-lg border border-[var(--border-secondary)] shadow-sm focus:border-[var(--border-focus)] focus:ring-2 focus:ring-[var(--ring-focus)] focus:ring-opacity-30 bg-[var(--bg-input)] text-[var(--text-primary)] transition-all duration-200"
                                    placeholder="Enter recording title">
                            </div>
                        </div>
                        
                        <!-- Participants field with icon -->
                        <div class="form-group">
                            <label class="flex items-center text-sm font-medium text-[var(--text-secondary)] mb-1.5">
                                <i class="fas fa-users text-[var(--text-accent)] mr-2"></i>
                                Participants
                            </label>
                            <div class="relative">
                                <input 
                                    v-model="editingRecording.participants" 
                                    class="pl-3 pr-3 py-2.5 block w-full rounded-lg border border-[var(--border-secondary)] shadow-sm focus:border-[var(--border-focus)] focus:ring-2 focus:ring-[var(--ring-focus)] focus:ring-opacity-30 bg-[var(--bg-input)] text-[var(--text-primary)] transition-all duration-200"
                                    placeholder="Enter participant names">
                            </div>
                        </div>
                        
                        <!-- Meeting Date field with icon -->
                        <div class="form-group">
                            <label class="flex items-center text-sm font-medium text-[var(--text-secondary)] mb-1.5">
                                <i class="fas fa-calendar-alt text-[var(--text-accent)] mr-2"></i>
                                Meeting Date
                            </label>
                            <div class="relative">
                                <input 
                                    type="date" 
                                    v-model="editingRecording.meeting_date" 
                                    class="pl-3 pr-3 py-2.5 block w-full rounded-lg border border-[var(--border-secondary)] shadow-sm focus:border-[var(--border-focus)] focus:ring-2 focus:ring-[var(--ring-focus)] focus:ring-opacity-30 bg-[var(--bg-input)] text-[var(--text-primary)] transition-all duration-200">
                            </div>
                        </div>
                        
                        <!-- Divider -->
                        <div class="relative py-3">
                            <div class="absolute inset-0 flex items-center">
                                <div class="w-full border-t border-[var(--border-primary)]"></div>
                            </div>
                            <div class="relative flex justify-center">
                                <span class="bg-[var(--bg-secondary)] px-4 text-xs font-medium text-[var(--text-muted)] uppercase tracking-wider">Content</span>
                            </div>
                        </div>
                        
                        <!-- Summary field with icon -->
                        <div class="form-group">
                            <label class="flex items-center text-sm font-medium text-[var(--text-secondary)] mb-1.5">
                                <i class="fas fa-file-alt text-[var(--text-accent)] mr-2"></i>
                                Summary
                            </label>
                            <div class="relative">
                                <textarea 
                                    v-model="editingRecording.summary" 
                                    class="pl-3 pr-3 py-2.5 block w-full rounded-lg border border-[var(--border-secondary)] shadow-sm focus:border-[var(--border-focus)] focus:ring-2 focus:ring-[var(--ring-focus)] focus:ring-opacity-30 bg-[var(--bg-input)] text-[var(--text-primary)] transition-all duration-200" 
                                    rows="5"
                                    placeholder="Enter summary of the recording"></textarea>
                            </div>
                        </div>
                        
                        <!-- Notes field with icon -->
                        <div class="form-group">
                            <label class="flex items-center text-sm font-medium text-[var(--text-secondary)] mb-1.5">
                                <i class="fas fa-sticky-note text-[var(--text-accent)] mr-2"></i>
                                Notes
                            </label>
                            <div class="relative">
                                <textarea 
                                    v-model="editingRecording.notes" 
                                    class="pl-3 pr-3 py-2.5 block w-full rounded-lg border border-[var(--border-secondary)] shadow-sm focus:border-[var(--border-focus)] focus:ring-2 focus:ring-[var(--ring-focus)] focus:ring-opacity-30 bg-[var(--bg-input)] text-[var(--text-primary)] transition-all duration-200" 
                                    rows="4"
                                    placeholder="Enter additional notes"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Footer with action buttons -->
                <div class="bg-[var(--bg-tertiary)] px-6 py-4 flex justify-end space-x-3 border-t border-[var(--border-primary)] flex-shrink-0">
                    <button 
                        @click="cancelEdit" 
                        class="px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-tertiary)] transition-colors duration-200 flex items-center shadow-sm">
                        <i class="fas fa-times mr-2"></i>
                        Cancel
                    </button>
                    <button 
                        @click="saveEdit" 
                        class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors duration-200 flex items-center shadow-sm">
                        <i class="fas fa-save mr-2"></i>
                        Save Changes
                    </button>
                </div>
            </div>
        </div>

        <div v-if="showDeleteModal" @click="cancelDelete" class="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-50 p-4">
             <div @click.stop class="bg-[var(--bg-secondary)] p-6 rounded-lg shadow-xl max-w-md w-full modal-content">
                <h3 class="text-lg font-semibold text-[var(--text-primary)] mb-4">Confirm Delete</h3>
                 <p v-if="recordingToDelete" class="mb-2 text-[var(--text-secondary)]">Are you sure you want to permanently delete the recording titled "<strong>${ recordingToDelete.title }</strong>"?</p>
                <p class="text-sm text-[var(--text-danger)] mb-6">This action cannot be undone and will delete the record, transcription, summary, and the audio file.</p>
                <div class="flex justify-end space-x-3">
                    <button @click="cancelDelete" class="px-4 py-2 bg-[var(--bg-tertiary)] text-[var(--text-secondary)] rounded-md hover:bg-[var(--border-secondary)]">Cancel</button>
                    <button @click="deleteRecording" class="px-4 py-2 bg-[var(--bg-danger)] text-[var(--text-button)] rounded-md hover:bg-[var(--bg-danger-hover)]">Delete Permanently</button>
                </div>
            </div>
        </div>

        <div v-if="(uploadQueue.length > 0 || currentlyProcessingFile) && !progressPopupClosed"
             class="progress-popup bg-[var(--bg-secondary)] rounded-lg shadow-xl border border-[var(--border-primary)] overflow-hidden"
             :class="{ 'minimized': progressPopupMinimized }">

            <div class="flex justify-between items-center p-2 bg-[var(--bg-tertiary)] border-b border-[var(--border-primary)]">
                <h4 class="text-sm font-semibold text-[var(--text-secondary)] cursor-pointer" @click="progressPopupMinimized = !progressPopupMinimized">
                    <i class="fas fa-upload mr-2 text-[var(--text-accent)]"></i>
                    Upload & Process Progress (${ completedInQueue }/${ totalInQueue } completed)
                </h4>
                <div class="flex items-center">
                    <button class="text-[var(--text-muted)] hover:text-[var(--text-secondary)] mr-2" @click="progressPopupMinimized = !progressPopupMinimized">
                        <i :class="progressPopupMinimized ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas fa-fw"></i>
                    </button>
                    <button class="text-[var(--text-muted)] hover:text-[var(--text-danger)]" @click="progressPopupClosed = true" title="Close">
                        <i class="fas fa-times fa-fw"></i>
                    </button>
                </div>
            </div>

             <div class="p-3 max-h-60 overflow-y-auto custom-scrollbar" v-show="!progressPopupMinimized">
                 <div v-if="currentlyProcessingFile" class="mb-3 pb-3 border-b border-dashed border-[var(--border-secondary)]">
                    <div class="flex items-center justify-between mb-1">
                        <p class="text-xs font-medium text-[var(--text-primary)] truncate mr-2" :title="currentlyProcessingFile.file.name">
                            <i class="fas fa-spinner fa-spin text-[var(--text-accent)] mr-1"></i> Processing: <span class="truncate">${ currentlyProcessingFile.file.name }</span>
                        </p>
                        <span class="text-xs text-[var(--text-muted)] flex-shrink-0">${ formatFileSize(currentlyProcessingFile.file.size) }</span>
                    </div>
                     <p class="text-xs text-[var(--text-secondary)] mb-1 italic">${ processingMessage }</p>
                    <div class="w-full bg-[var(--border-primary)] rounded-full h-1.5">
                         <div class="bg-[var(--text-accent)] h-1.5 rounded-full transition-all duration-300" :style="{ width: processingProgress + '%' }"></div>
                    </div>
                </div>

                 <div v-if="queuedFiles.length > 0" class="mb-2">
                    <p class="text-xs font-semibold text-[var(--text-muted)] mb-1">${ queuedFiles.length } file(s) queued:</p>
                    <ul class="space-y-1">
                        <li v-for="item in queuedFiles" :key="item.clientId" class="text-xs text-[var(--text-secondary)] progress-list-item">
                            <i class="fas fa-clock text-[var(--text-light)] fa-fw"></i>
                            <span class="truncate" :title="item.file.name">${ item.file.name }</span>
                            <span class="text-[var(--text-light)] flex-shrink-0">${ formatFileSize(item.file.size) }</span>
                        </li>
                    </ul>
                </div>

                <div v-if="finishedFilesInQueue.length > 0" class="mt-2 pt-2 border-t border-dashed border-[var(--border-secondary)]">
                    <p class="text-xs font-semibold text-[var(--text-muted)] mb-1">Recently finished:</p>
                    <ul class="space-y-1">
                         <li v-for="item in finishedFilesInQueue.slice(-5)" :key="item.clientId" class="text-xs progress-list-item">
                             <i v-if="item.status === 'completed'" class="fas fa-check-circle text-[var(--text-success-strong)] fa-fw"></i>
                            <i v-else-if="item.status === 'failed'" class="fas fa-exclamation-triangle text-[var(--text-danger-strong)] fa-fw"></i>
                             <i v-else class="fas fa-question-circle text-[var(--text-light)] fa-fw"></i>
                            <span class="truncate text-[var(--text-secondary)]" :title="item.file.name">${ item.file.name }</span>
                             <span v-if="item.status === 'failed'" class="text-[var(--text-danger)] text-xs italic flex-shrink-0">Failed</span>
                            <span v-else class="text-[var(--text-light)] flex-shrink-0">${ formatFileSize(item.file.size) }</span>
                        </li>
                    </ul>
                </div>

                 <div v-if="uploadQueue.length > 0 && queuedFiles.length === 0 && !currentlyProcessingFile" class="text-xs text-center text-[var(--text-muted)] py-2">
                    All uploads processed.
                </div>
            </div>
        </div>

    </div>
    
    <!-- Toast container for notifications -->
    <div class="toast-container" id="toastContainer"></div>
    
    <!-- App.js is already included in the head section -->
</body>
</html>
